<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>消息</title>
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<link type="text/css" rel="stylesheet" href="/static/css/common.css">
		<link type="text/css" rel="stylesheet" href="/static/css/hbstyle.css">
        <link type="text/css" rel="stylesheet" href="/static/css/ycstyle.css">
		<script type="text/javascript" src="/static/js/jquery.min.js"></script>
	</head>
	<script type="text/javascript">
        $(document).ready(function(){
			var formId = "{$formId}";

            //创建一个socket实例
            var socket      = null; //初始为null
            socket = new WebSocket("ws://127.0.0.1:8282");
            socket.onmessage = function (ev) { //使用进行回调（获取）
                var data = JSON.parse(ev.data);
                switch (data.type) {
                    case 'init':
                        var bind = '{"type":"bind","formId":"'+formId+'"}';
                        socket.send(bind); //发送给服务器要求绑定用户
						getTalkList(formId);
                        break;
					case 'text':
					    //要先清空在追加
						$('#messagelist').html('');
                        getTalkList(formId);
						return;
					case 'img':
                        //要先清空在追加
                        $('#messagelist').html('');
                        getTalkList(formId);
                        return;
				}
            }
        });

        function getTalkList(formId) {

            $.ajax({
                url:"{:url('getTalkList')}",
                type:'POST',
                cache:false,
                data:{"formid":formId},
                dataType:'json',
                async: true,
                success:function (data, status, xhr) {
                    console.log(data);
                    if(data.code==0){
                        $.each(data.data,function (index,content) {
                            if(content.last.type==1){
                                $("#messagelist").append('<div onclick="jump_talk('+content.formid+');" class="hb-xiaoxi-list">\n' +
                                    '\t<div class="hb-xiaoxi-touxiang"><img src="'+content.avatar+'"><span class="hb-red-point">'+content.no_read_num+'</span></div>\n' +
                                    '\t<div class="hb-xiaoxi-list-title">\n' +
                                    '\t<div class="hb-xiaoxi-list-name"><h5>'+content.username+'</h5><span>'+content.last.content+'</span></div>\n' +
                                    '\t<span class="hb-xiaoxi-list-time">'+getLocalTime(content.last.create_time)+'</span>\t</div>\n' +
                                    '</div>')
							} else {
                                $("#messagelist").append('<div onclick="jump_talk('+content.formid+');" class="hb-xiaoxi-list">\n' +
                                    '\t<div class="hb-xiaoxi-touxiang"><img src="'+content.avatar+'"><span class="hb-red-point">'+content.no_read_num+'</span></div>\n' +
                                    '\t<div class="hb-xiaoxi-list-title">\n' +
                                    '\t<div class="hb-xiaoxi-list-name"><h5>'+content.username+'</h5><span>[图片]</span></div>\n' +
                                    '\t<span class="hb-xiaoxi-list-time">'+getLocalTime(content.last.create_time)+'</span>\t</div>\n' +
                                    '</div>')
							}

                        });
                    }
                }
            });
        }

        function getLocalTime(nS) {
            return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
        }

        function jump_talk(toId) {
            alert(formId);
            return false;
            window.location.href='/index.php/worker/index/talk?formid='+formId+'&toid='+toId;
        }
	</script>

<body>



<div class="hb-xiaoxi-top hb-flex2">
	<div class="hb-xiaoxi-touxiang"><img src="/static/images/hb-xiaoxi.jpg"></div>
	<div class="hb-xiaoxi-top-title"><h5>销售管家</h5>
	<span>暂无消息</span></div>
</div>

<div id="messagelist">

</div>
<!--dibu-->
<div class="hb-footer-height"></div>
	<footer class="hb-footer">
            <div class="hb-footer-nr">
			<a href="" class="hb-footer-alink" >
                    <span class="hb-footer-icon hb-footer-icon-01"> </span>
                <span class="hb-footer-text">雷达</span>
				</a>
            <a href=""  class="hb-footer-alink-active">
                    <span class="hb-footer-icon hb-footer-icon-02-active"><span class="hb-footer-point">1</span></span>
                <span class="hb-footer-text">消息</span>            </a>
            <a href=""  class="hb-footer-alink">
                    <span class="hb-footer-icon hb-footer-icon-03">                    </span>
                <span class="hb-footer-text">通讯录</span>
				</a>
            <a href=""  class="hb-footer-alink">
                 <span class="hb-footer-icon hb-footer-icon-04"><span class="hb-footer-point">3</span>                    </span>
                <span class="hb-footer-text">工作</span>            </a>
            <a href=""  class="hb-footer-alink">
                    <span class="hb-footer-icon hb-footer-icon-05">                    </span>
            <span class="hb-footer-text">我的</span>            </a></div>
        </footer>	
	<!--dibu-->	
	</body>
</html>